{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap/bootstrap.min.css' %}">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap-icons/font/bootstrap-icons.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'grading/css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>简单测试页面</h2>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>评分系统界面测试</h5>
                </div>
                <div class="card-body">
                    <!-- 评分按钮组 -->
                    <div class="d-flex align-items-center">
                        <!-- 评分方式切换 -->
                        <div class="btn-group me-3" role="group" aria-label="评分方式">
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn active" data-mode="letter">
                                字母等级
                            </button>
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn" data-mode="text">
                                文字等级
                            </button>
                        </div>

                        <!-- 字母等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="字母评分选项" id="letter-grade-buttons">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="A">A</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="B">B</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="C">C</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="D">D</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="E">E</button>
                        </div>

                        <!-- 文字等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="文字评分选项" id="text-grade-buttons" style="display: none;">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="优秀">优秀</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="良好">良好</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="中等">中等</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="及格">及格</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="不及格">不及格</button>
                        </div>

                        <button type="button" class="btn btn-primary me-2" id="add-grade-to-file">
                            确定
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="cancel-grade">
                            撤销
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>测试结果</h5>
                </div>
                <div class="card-body">
                    <div id="test-results">
                        <p>测试结果将显示在这里...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- jQuery -->
<script src="{% static 'grading/vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="{% static 'grading/vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>

<script>
// 简化的评分系统功能
let selectedGrade = 'B';
let gradeMode = 'letter';

// 设置评分按钮状态
function setGradeButtonState(grade) {
    console.log('设置评分按钮状态:', grade);
    $('.grade-button').removeClass('active');
    $(`.grade-button[data-grade="${grade}"]`).addClass('active');
    selectedGrade = grade;
}

// 切换评分方式
function switchGradeMode(mode) {
    console.log('切换评分方式:', mode);
    gradeMode = mode;

    // 更新按钮状态
    $('.grade-mode-btn').removeClass('active');
    $(`.grade-mode-btn[data-mode="${mode}"]`).addClass('active');

    // 显示/隐藏对应的评分按钮组
    if (mode === 'letter') {
        $('#text-grade-buttons').hide();
        $('#letter-grade-buttons').show();
        if (!['A', 'B', 'C', 'D', 'E'].includes(selectedGrade)) {
            selectedGrade = 'B';
        }
    } else if (mode === 'text') {
        $('#letter-grade-buttons').hide();
        $('#text-grade-buttons').show();
        if (!['优秀', '良好', '中等', '及格', '不及格'].includes(selectedGrade)) {
            selectedGrade = '良好';
        }
    }

    setGradeButtonState(selectedGrade);
}

// 页面加载完成后初始化
$(document).ready(function() {
    console.log('=== 简单测试页面加载完成 ===');

    // 初始化默认状态
    switchGradeMode('letter');

    // 绑定评分方式切换按钮事件
    $(document).on('click', '.grade-mode-btn', function(e) {
        e.preventDefault();
        const mode = $(this).data('mode');
        console.log('评分方式按钮被点击:', mode);
        switchGradeMode(mode);
    });

    // 绑定评分按钮点击事件
    $(document).on('click', '.grade-button', function() {
        const grade = $(this).data('grade');
        console.log('评分按钮被点击:', grade);
        setGradeButtonState(grade);
    });

    // 绑定确定按钮点击事件
    $(document).on('click', '#add-grade-to-file', function() {
        console.log('确定按钮被点击，当前评分:', selectedGrade);
        $('#test-results').html(`<div class="alert alert-success">已选择评分: ${selectedGrade} (${gradeMode === 'letter' ? '字母等级' : '文字等级'})</div>`);
    });

    // 绑定撤销按钮点击事件
    $(document).on('click', '#cancel-grade', function() {
        console.log('撤销按钮被点击');
        $('#test-results').html(`<div class="alert alert-info">已撤销评分操作</div>`);
    });

    // 显示初始状态
    $('#test-results').html(`
        <div class="alert alert-info">
            <h6>初始状态:</h6>
            <ul>
                <li>评分方式: ${gradeMode === 'letter' ? '字母等级' : '文字等级'}</li>
                <li>当前评分: ${selectedGrade}</li>
                <li>字母评分按钮组显示: ${$('#letter-grade-buttons').is(':visible') ? '是' : '否'}</li>
                <li>文字评分按钮组显示: ${$('#text-grade-buttons').is(':visible') ? '是' : '否'}</li>
            </ul>
        </div>
    `);
});
</script>
{% endblock %}
